﻿.card {
    background: $white;    
    margin-bottom: 30px;
    transition: .5s;    
    border: 0;
    border-radius: $border-radius-small;
    display: inline-block;
    position: relative;
    width: 100%;
    box-shadow: none;

    .card-inside-title {
        @extend .m-t-25;
        @extend .m-b-15;
        display: block;
        font-size: 15px;
        color: $black;
        small {
            color: $grey-500;
            display: block;
            font-size: 11px;
            @extend .m-t-5;
            a {
                color: $grey-600;
                font-weight: bold;
            }
        }
    }
    .card-inside-title:first-child {        
        @extend .m-t-0;
        
    }
    .bg-red,
    .bg-pink,
    .bg-purple,
    .bg-deep-purple,
    .bg-indigo,
    .bg-blue,
    .bg-light-blue,
    .bg-cyan,
    .bg-teal,
    .bg-green,
    .bg-light-green,
    .bg-lime,
    .bg-yellow,
    .bg-amber,
    .bg-orange,
    .bg-deep-orange,
    .bg-brown,
    .bg-grey,
    .bg-blue-grey,
    .bg-blush,
    .bg-black {

        border-bottom: none !important;
        color: $white !important;
        h2,
        small,
        .material-icons {
            color: $white !important;
        }
        .badge {
            background-color: $white;
            color: $grey-800;
        }
    }

    .header {
        color: $grey-800;
        padding:20px;
        position: relative;       
        box-shadow: none;
        @extend .m-b-0;

        .header-dropdown {
            position: absolute;
            top: 14px;
            right:20px;
            list-style: none;
            @extend .margin-0;
            @extend .padding-0;
            li{
                display: inline-block;
                a{
                    padding: 5px 10px;
                    @extend .displayblock;
                }

                .dropdown-menu {
                    padding: 5px;
                    li {
                        display: block !important;
    
                        a {
                            padding: 5px 10px;
                        }
                    }
                }
    
            }            
            i {
                font-size: 20px;
                color: $grey-500;
                @include transition(all .5s);
                &:hover {
                    color: $black;
                }
            }
        }
        h2 {
            @extend .margin-0;
            font-size: 15px;            
            color: $grey-600;
            position: relative;

            &::before{
                position: absolute;
                width: 2px;
                height: 18px;
                left: -20px;
                top: 0;
                content: '';
            }

            small {
                @extend .displayblock;
                font-size: 13px;
                @extend .m-t-5;
                color: $grey-500;
                line-height: 15px;                
                a {
                    font-weight: bold;
                    color: $grey-600;
                }
            }
        }
    }

    .p-15 {
        padding: 15px !important;
    }

    .body {
        font-size: 14px;
        color: $grey-800;
        padding: 20px;
        font-weight: 400;        
    }
}